<template>
  <div class="container">
    <Breadcrumb :items="['menu.common', 'menu.common.note']" />
    <a-card title="合作意向管理">
      <a-space fill direction="vertical" size="large">
        <!-- 搜索表单 -->
        <a-form layout="inline" :model="searchForm" @submit="handleSearch">
          <a-form-item field="phone" label="手机号搜索" :hide-label="true">
            <a-input v-model="searchForm.phone" placeholder="请输入手机号进行搜索" allow-clear />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" html-type="submit" shape="round">
                <template #icon><icon-search /></template>
                搜索
              </a-button>
              <a-button shape="round" @click="resetSearch">
                <template #icon><icon-refresh /></template>
                重置
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>

        <!-- 数据表格 -->
        <a-table :data="renderData" :loading="loading" :bordered="{ cell: true }" :pagination="pagination"
          @page-change="onPageChange" @page-size-change="onPageSizeChange">
          <template #columns>
            <a-table-column title="ID" data-index="id" :width="80" />
            <a-table-column title="手机号" data-index="phone" :width="150" />
            <a-table-column title="内容" data-index="content" :ellipsis="true" :tooltip="true" />
            <a-table-column title="状态" data-index="status" :width="120">
              <template #cell="{ record }">
                <a-tag :color="record.status === 1 ? 'green' : 'orange'">
                  {{ record.status === 1 ? '已处理' : '未处理' }}
                </a-tag>
              </template>
            </a-table-column>
            <a-table-column title="创建时间" data-index="created_at" :width="180">
              <template #cell="{ record }">
                {{ formatTime(record.created_at) }}
              </template>
            </a-table-column>
            <a-table-column title="处理时间" data-index="do_at" :width="180">
              <template #cell="{ record }">
                {{ record.do_at ? formatTime(record.do_at) : '-' }}
              </template>
            </a-table-column>
            <a-table-column title="操作" align="center" :width="120">
              <template #cell="{ record }">
                <a-space size="mini">
                  <a-popconfirm v-if="record.status === 0" position="left" content="确定要标记为已处理吗？"
                    @ok="handleProcess(record.id)">
                    <a-button type="primary" size="small">
                      处理
                    </a-button>
                  </a-popconfirm>
                  <a-tag v-else color="green" size="small">已处理</a-tag>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </a-space>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { queryNoteList, processNote, type NoteRecord, type NoteParams } from '@/api/note';

// 响应式数据
const loading = ref(false);
const renderData = ref<NoteRecord[]>([]);
const total = ref(0);

// 搜索表单
const searchForm = reactive({
  phone: '',
});

// 分页配置
const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});

// 获取数据
const fetchData = async () => {
  loading.value = true;
  try {
    const params: NoteParams = {
      current: pagination.current,
      pageSize: pagination.pageSize,
      phone: searchForm.phone || undefined,
    };

    const response = await queryNoteList(params);
    renderData.value = response.data.list;
    total.value = response.data.total;
    pagination.total = response.data.total;
  } catch (error: any) {
    Message.error(error.response?.data?.msg || '获取数据失败');
  } finally {
    loading.value = false;
  }
};

// 搜索处理
const handleSearch = () => {
  pagination.current = 1;
  fetchData();
};

// 重置搜索
const resetSearch = () => {
  searchForm.phone = '';
  pagination.current = 1;
  fetchData();
};

// 分页处理
const onPageChange = (current: number) => {
  pagination.current = current;
  fetchData();
};

const onPageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize;
  pagination.current = 1;
  fetchData();
};

// 处理合作意向
const handleProcess = async (id: number) => {
  try {
    await processNote(id);
    Message.success('处理成功');
    fetchData(); // 刷新数据
  } catch (error: any) {
    Message.error(error.response?.data?.msg || '处理失败');
  }
};

// 格式化时间
const formatTime = (timestamp: number) => {
  if (!timestamp) return '-';
  const date = new Date(timestamp * 1000);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};

// 初始化
onMounted(() => {
  fetchData();
});
</script>

<script lang="ts">
export default {
  name: 'CommonNote',
};
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>
